<!DOCTYPE html>
<html lang="en">
<head>
  <title>${musicDetail.title} TikTok by ${musicDetail.author} | GugeeData</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <meta name="baidu-site-verification" content="7Kv8mw99Qh" />
  <meta name="google-site-verification" content="YPMm_1_f59WXKSd04F1LGCjKeDGVrf_ajrylNKEDtqg" />
  <meta name="keywords" content=" TikTok Videos, ${musicDetail.title}, ${musicDetail.author}, Popular TikTok Songs, TikTok Sounds, TikTok Music, TikTok Analytics">
  <meta name="description" content="Let's check out ${musicDetail.title} TikTok analytics report on GugueeData.">
  <meta property="og:title" content="${musicDetail.title} TikTok by ${musicDetail.author} | GugeeData">
  <meta property="og:description" content="Let's check out ${musicDetail.title} TikTok analytics report on GugueeData.">
  <meta name="twitter:title" content="${musicDetail.title} TikTok by ${musicDetail.author}| GugeeData">
  <meta name="twitter:description" content="Let's check out ${musicDetail.title} TikTok analytics report on GugueeData.">
  <script>
    <#if login != false>
      window.location.href="https://tk.gugeedata.com/#/elements/sounds"
    </#if>
  </script>
  <link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="${request.contextPath} /static/img/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="${request.contextPath}/static/css/reset.css">
  <link rel="stylesheet" href="${request.contextPath}/static/css/common.css">
  <link rel="stylesheet" href="${request.contextPath}/static/css/sounds-detail.css">
</head>
<body>
  <#include "../../header_new.ftl">
  <main>
    <section>
      <div class="wrapper wrap-hashtag">
        <h1>${musicDetail.title} TikTok Song</h1>
        <h3>Check out ${musicDetail.title} TikTok music analytic report.</h3>
        <div class="main-content">
          <div class="sounds-detail">
            <div class="top">
              <div class="sounds-info">
                <div class="img-info">
                  <#if musicDetail.coverMedium != ''>
                    <img src="${musicDetail.coverMedium}" alt="${musicDetail.title}">
                  <#else>
                    <img src="${request.contextPath}/static/img/Music.png" alt="${musicDetail.title}"/>
                  </#if>
                </div>
                <div class="tx-info">
                  <div class="title">
                    <#if isOriginal??>
                      <i class="iconfont iconyinle"></i>
                    </#if>
                    ${musicDetail.title}
                  </div>
                  <div class="data-info">
                    <div class="data-item">
                      Author: ${musicDetail.author}
                    </div>
                    <div class="data-item">
                      Duration: ${musicDetail.durationString}
                    </div>
                    <div class="data-item">
                      Videos: <#assign videoCount=myController.getNumber(musicDetail.userCount)>${videoCount}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sounds-video">
              <#list videos as video>
                <div class="video-item" onmouseover="showSoundMask(this)" onmouseout="hideSoundMask(this)">
                  <img src="${video.cover}" alt="TikTok analytics">
                  <div class="bottom">
                    <i class="iconfont iconic_play"></i>
                    <#assign playCount=myController.getNumber(video.views)>${playCount}
                  </div>
                  <a href="${video.shareUrl}" target="_blank" rel="nofollow">
                    <div class="mask">
                      <button class="small">Play</button>
                    </div>
                  </a>
                </div>
              </#list>
            </div>
            <div class="footer">
              <#if login != false>
                <a href="https://tk.gugeedata.com/#/elements/sounds">View More</a>
              <#else>
                <a href="javascript:;" onclick="toLogin()">View More</a>
              </#if>
            </div>
          </div>
          <div class="sounds-trend">
            <h2>TikTok Song Trends</h2>
            <h3>Find out hit music that niches to your account.</h3>
            <div class="trend-info">
              <img src="${request.contextPath}/static/img/trend.png" alt="TikTok analytics">
              <div class="mask">
                <div class="dialog">
                  <div class="tx">
                    Please login for more information.
                  </div>
                  <button class="small" onclick="toLogin()">Login</button>
                </div>
              </div>
            </div>
          </div>
          <div class="sounds-more">
            <h2>Explore More Songs</h2>
            <h3>Browse more music analytics report for the latest TikTok viral songs to find the best sound that fits your video.</h3>
            <div class="more-list">
              <#list recommendedMusic as item>
                <a href="${contextPath}/tiktok/sounds/${item.mid?c}">
                  <div class="more-item">
                    <div class="top">
                      <#if item.coverMedium != ''>
                        <img src="${item.coverMedium}" alt="${item.title}">
                      <#else>
                        <img src="${request.contextPath}/static/img/Music.png" alt="${item.title}"/>
                      </#if>
                      <div class="title">
                        ${item.title}
                      </div>
                      <div class="author">
                        ${item.author}
                      </div>
                    </div>
                    <div class="more-data">
                      <div class="data-item">
                        <div class="label">Videos:<#assign userCount=myController.getNumber(item.userCount)>${userCount}</div>
                      </div>
                    </div>
                  </div>
                </a>
              </#list>
            </div>
            <div class="row">
              <#if login != false>
                <a href="https://tk.gugeedata.com/#/elements/sounds">
                  <button class="small">View More</button>
                </a>
              <#else>
                <button class="small" onclick="toLogin()">Login to View More</button>
              </#if>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <#include "../../footer.ftl">
  <script>
    function showSoundMask(e) {
      e.querySelector('.mask').style.display = 'flex'
    }
    function hideSoundMask(e) {
      e.querySelector('.mask').style.display = 'none'
    }
  </script>
</body>
</html>
